import React from "react";
import GoBack from "@/components/TheGoBack";
import { Form, Select, Input, InputNumber } from "antd";
import TheUpload from "../../../../components/TheUpload";
import Sku from "./Sku";
import "../../style/style.less";
import TheButton from "../../../../components/TheButton";
import TheQuill from "@/components/TheQuill";

class Add extends React.Component {
  state = {
    currentIndex: 1,
    skuPropertyArray: [],
    skuPropertyTable: [],
    skuType: "",
    numResult: [],
  };
  getFileResult = (value) => {
    // if (value.length && value[0].response && value[0].response.code === 0) {
    //   const id = value[0].response.data[0].data;
    //   this.formRef.setFieldsValue({ productFilezId: id });
    // } else {
    //   this.formRef.setFieldsValue({ productFilezId: "" });
    // }
  };
  /**
   * @desc 设置新闻内容表单默认值
   * */
  setNewsContent = (data) => {
    // this.setState({
    //     productTxt: data
    // })
  };
  setCurrentIndex = (index) => {
    this.setState({ currentIndex: index });
  };
  /**
   * @desc 获取sku返回值
   * */
  getSkuProperty = (skuPropertyArray, skuPropertyTable, skuType) => {
    let arr = [];
    if (skuPropertyTable.length > 0) {
      if (
        Object.prototype.toString.call(skuPropertyTable[0]) ===
        "[object Object]"
      ) {
        skuPropertyTable.forEach((v) => {
          arr.push(v);
        });
        arr = [arr];
      } else {
        arr = skuPropertyTable;
      }
    }
    this.setState({ skuPropertyArray, skuPropertyTable: arr, skuType });
  };
  /**
   * @desc 获取sku价格返回值
   * */
  getNumResult = (numResult) => {
    this.setState({ numResult });
  };
  goback = () => {
    this.props.history.go(-1);
  };
  render() {
    const { currentIndex } = this.state;
    const options = [
      {
        label: "全部",
        value: 0,
      },
    ];
    return (
      <div className="p-layout-box commodity-list-add">
        <GoBack history={this.props.history} title={"新增商品"} />
        <div className="content">
          <div style={{ display: currentIndex === 1 ? "block" : "none" }}>
            <div>
              <div className="title">基本信息</div>
              <div className="form-box">
                <Form>
                  <Form.Item label="商品分类">
                    <Select options={options} />
                  </Form.Item>
                  <Form.Item label="商品名称">
                    <Input placeholder="请输入商品名称" />
                  </Form.Item>
                  <Form.Item label="商品原价">
                    <InputNumber placeholder="请输入商品原价" />
                  </Form.Item>
                  <Form.Item label="商品现价">
                    <InputNumber placeholder="请输入商品现价" />
                  </Form.Item>
                  <Form.Item label="商品图片">
                    <TheUpload getFileResult={this.getFileResult} maxSize={10} len={1} />
                  </Form.Item>
                </Form>
              </div>
            </div>
            <div>
              <div className="title">商品规格信息</div>
              <Sku
                getSkuProperty={this.getSkuProperty}
                getNumResult={this.getNumResult}
              />
            </div>
          </div>
          <div style={{ display: currentIndex === 2 ? "block" : "none" }}>
            <div className="title">商品规格信息</div>
            <TheQuill defaultValue={" "} setNewsContent={this.setNewsContent} />
          </div>
        </div>
        <div className="button-group">
          <TheButton type="default" size="middle" onClick={this.goback}>
            取消
          </TheButton>

          {currentIndex === 1 && (
            <TheButton
              style={{ backgroundColor: "#F59A23", color: "#fff" }}
              size="middle"
              onClick={() => this.setCurrentIndex(2)}
            >
              下一页
            </TheButton>
          )}

          {currentIndex === 2 && (
            <div>
              <TheButton
                type="default"
                size="middle"
                onClick={() => this.setCurrentIndex(1)}
              >
                上一步
              </TheButton>
              <TheButton
                style={{ backgroundColor: "#F59A23", color: "#fff" }}
                size="middle"
              >
                发布
              </TheButton>
              <TheButton
                style={{ backgroundColor: "#F59A23", color: "#fff" }}
                size="middle"
              >
                保存
              </TheButton>
            </div>
          )}
        </div>
      </div>
    );
  }
}

export default Add;
